<template>
  <div id="myChart"></div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "AreaHeat",
    mounted: function () {
      const that = this;
      this.getData();
    },
    methods: {
      getData() {
        const that = this;
        const loading = this.$loading({
          lock: true,
          text: '计算热力数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get("http://localhost:8089/try/car/time").then(function (result) {
          if (result.data.length > 0) {
            let data = result.data;
            let array = [];
            for (let i = 0; i <data.length ; i++) {
              let points=[];
              for (let j = 0; j < data[i].length; j++) {
                points.push([data[i][j].lng,data[i][j].lat]);
              }
              array.push(points)
            }
            console.log(array);
            that.showChart(array);

          }

        }).catch(function (err) {
          console.log(err)
        }).finally(function () {
          loading.close();
        })
      },
      showChart(data) {
        let myChart = echarts.init(document.getElementById('myChart'));
        myChart.setOption(
          {
            baseOption: {
              title: {
                left: 'center'
              },
              timeline: {
                autoPlay: true,
                data: ["13:00", "14:00", "15:00", "16:00"],
                axisType: 'category',
                padding: [5, 5, 5, 5],
                playInterval: 1500,
                lineStyle: {color: 'white'},
                label: {
                  normal: {
                    textStyle: {
                      color: 'white',
                      fontSize: 13
                    }
                  }
                }
              },
              tooltip: {
                trigger: 'item'
              },
              visualMap: {
                min: 100,
                max: 100000,
                splitNumber: 5,
                inRange: {
                  color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                },
                textStyle: {
                  color: '#fff'
                }
              },
              bmap: {
                center: [116.46, 39.92],
                zoom: 10,
                roam: true,
                mapStyle: {
                  styleJson: [
                    {
                      'featureType': 'land',
                      'elementType': 'geometry',
                      'stylers': {
                        'color': '#081734'
                      }
                    },
                    {
                      'featureType': 'building',
                      'elementType': 'geometry',
                      'stylers': {
                        'color': '#04406F'
                      }
                    },
                    {
                      'featureType': 'building',
                      'elementType': 'labels',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'highway',
                      'elementType': 'geometry',
                      'stylers': {
                        'color': '#015B99'
                      }
                    },
                    {
                      'featureType': 'highway',
                      'elementType': 'labels',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'arterial',
                      'elementType': 'geometry',
                      'stylers': {
                        'color': '#003051'
                      }
                    },
                    {
                      'featureType': 'arterial',
                      'elementType': 'labels',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'green',
                      'elementType': 'geometry',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'water',
                      'elementType': 'geometry',
                      'stylers': {
                        'color': '#044161'
                      }
                    },
                    {
                      'featureType': 'subway',
                      'elementType': 'geometry.stroke',
                      'stylers': {
                        'color': '#003051'
                      }
                    },
                    {
                      'featureType': 'subway',
                      'elementType': 'labels',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'railway',
                      'elementType': 'geometry',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'railway',
                      'elementType': 'labels',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'all',
                      'elementType': 'labels.text.stroke',
                      'stylers': {
                        'color': '#313131'
                      }
                    },
                    {
                      'featureType': 'all',
                      'elementType': 'labels.text.fill',
                      'stylers': {
                        'color': '#FFFFFF'
                      }
                    },
                    {
                      'featureType': 'manmade',
                      'elementType': 'geometry',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'manmade',
                      'elementType': 'labels',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'local',
                      'elementType': 'geometry',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'local',
                      'elementType': 'labels',
                      'stylers': {
                        'visibility': 'off'
                      }
                    },
                    {
                      'featureType': 'subway',
                      'elementType': 'geometry',
                      'stylers': {
                        'lightness': -65
                      }
                    },
                    {
                      'featureType': 'railway',
                      'elementType': 'all',
                      'stylers': {
                        'lightness': -40
                      }
                    },
                    {
                      'featureType': 'boundary',
                      'elementType': 'geometry',
                      'stylers': {
                        'color': '#8b8787',
                        'weight': '1',
                        'lightness': -29
                      }
                    }
                  ]
                }


              },
              series: [
                {
                  name: '热门出行站点',
                  type: 'heatmap',
                  coordinateSystem: 'bmap',
                  symbolSize: function (val) {
                    return val[2] / 50;
                  },
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: false
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#f4e925'
                    }
                  }
                }
              ]

            },
            options: [
              {
                series: [{
                  data: data[0]
                }]
              },
              {
                series: [{
                  data: data[1]
                }]
              },
              {
                series: [{
                  data: data[2]
                }]
              },
              {
                series: [{
                  data: data[3]
                }]
              }
            ]
          });
        let bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl());
      },
    }
  }
</script>

<style scoped>

</style>
